<template>
  <div>
    <el-dialog title="名医详情" :visible.sync="showDialog_" custom-class='dialog_right MkDoctorDetail PublicDetailStyle dialogScroll_detail' top='0%' @close='closeDialog' @open='openDialog'>
      <!--<mk-permission :perms="['swxc:property:merchant:merchantMgt:update']">-->
        <div class="operationBtnInRightDialog" style="right:170px;">
          <span class='infoIcon'  @click="dialogVisible_addDoctor=true"><i class="el-icon-edit"></i> 编辑</span>
        </div>
        <div class="operate">
          <el-popover placement="top" title="" trigger="hover" popper-class='MkPopover_tip defined_tip'>
            <span>{{doctorDetail.status=='Show'?'下架':'展示'}}</span>
            <span slot="reference">
              <!--v-model='doctorDetail.status'-->
                     <el-switch  v-model="doctorShow" @change='isDisabled()' class='' style="margin-right:10px;"  >
                    </el-switch>
                  </span>
          </el-popover>
          <span v-if="doctorDetail.status=='Show'" style="color:#3bc0c3">展示中</span>
          <span v-else >已下架</span>
        </div>
      <!--</mk-permission>-->
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-110)+'px'}]">
        <div class="contentDiv">
          <el-form :model="doctorDetail" ref="DetailForm" label-width="110px">
            <el-form-item  label="姓名">
              {{doctorDetail.name}}
        </el-form-item>
            <el-form-item  label="电话">
              {{doctorDetail.phone}}
        </el-form-item>
            <el-form-item  label="科室">
              {{doctorDetail.department}}
        </el-form-item>
            <el-form-item  label="职称">
              {{doctorDetail.titleOfDoctor}}
        </el-form-item>
            <el-form-item  label="就职医院">
              {{doctorDetail.inauguralHospital}}
        </el-form-item>
            <el-form-item  label="所在城市">
              {{doctorDetail.cityName}}
        </el-form-item>
            <el-form-item  label="擅长领域">
              <el-tag
                :key="tag.value"
                v-for="tag in tags"
                type='primary'
              >
                {{tag}}
              </el-tag>
        </el-form-item>
            <el-form-item  label="名医简介">
              {{doctorDetail.content}}
        </el-form-item>
            <el-form-item  label="头像">
              <!--<template v-for="item in doctorDetail.avatar">-->
                <img :src="doctorDetail.avatar" alt="" width="120px" height="120px">
              <!--</template>-->
            </el-form-item>
          </el-form>
        </div>
      </el-scrollbar>
    </el-dialog>
    <!--  修改 -->
    <MkAddDoctor :showDialog='dialogVisible_addDoctor' :title='"编辑名医"' :currentCustomer='doctorDetail' v-on:closeDialog='closeDialog_add'></MkAddDoctor>
  </div>
</template>

<script>
  import doctorService from '../../services/doctor'
//  import MkPermission from "../../components/MkPermission";
  import MkAddDoctor from './MkAddDoctor.vue'
  import {mapState} from 'vuex'
  export default {
    name: 'MkDoctorDetail',
    components: {
      MkAddDoctor
    },
    props: ['showDialog','currentCustomerId'],
    filters: {
      joinStatus(value) {
        switch(value) {
          case 'NOT_SUBMITTED': return '未交付';
          case 'SUBMITTED': return '已交付';
        }
      },
      saleStatus(value) {
        switch(value) {
          case 'NO_SALE': return '未销售';
          case 'SOLD': return '已销售';
          case 'IN_CONTROL': return '内控';
        }
      },
      status(value) {
        switch(value) {
          case 'VACANT': return '空置';
          case 'DECORATING': return '正在装修';
          case 'LIVE_IN': return '已入住';
          case 'RENT_OUT': return '已租';
          case 'NORMAL': return '正常';
        }
      },
      formatDate(value){
        if(value){
          return new Date(value).pattern('yyyy-MM-dd')
        }else {
          return ''
        }
      },
    },
    computed:mapState({
      bodyHeight: state => state.global.bodyHeight,
    }),
    methods: {
      closeDialog() {
        this.$emit('closeDialog',this.isRefresh);
        this.tags.splice(0,this.tags.length);
      },
      openDialog() {
        this.isRefresh = false;
        this.loader();
      },
      closeDialog_add(type) {
        this.isRefresh = type;
        this.dialogVisible_addDoctor = false;
        this.showDialog_ = false;
      },
      loader(){
        doctorService.loadDoctorDetail({id: this.currentCustomerId},(data)=>{
          this.doctorDetail = data.data;
          this.tags = this.doctorDetail.goodField?this.doctorDetail.goodField.split(","):[];
          if(this.doctorDetail.status=="Show"){
            this.doctorShow=true;
          }else {this.doctorShow=false}
        });
      },
      isDisabled(){
        if(this.doctorDetail.status=='Hide'){//启用
          this.$confirm('您是否确认展示该名医?', '展示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal: false,
            closeOnPressEscape: false,
            customClass: 'confirmBox_warning'
          }).then(() => {
            this.enableOrDisable();
          }).catch(() => {
//            this.doctorDetail.status="Hide";
            this.doctorShow=false;
          });
        }else{//禁用
          this.$confirm('您是否确认下架该名医的展示?', '下架', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal: false,
            closeOnPressEscape:false,
            customClass: 'confirmBox_warning'
          }).then(() => {
            this.enableOrDisable();
          }).catch(() => {
//            this.doctorDetail.status="Show";
            this.doctorShow=true;
          });
        }
      },
      enableOrDisable() {
          let typeStr = '';
        if(this.doctorDetail.status == "Show"){
          typeStr ="Hide";
        }else {
          typeStr = "Show";
        }
        doctorService.loadDoctorShow({id:this.currentCustomerId,status:typeStr},(data)=>{
          if(typeStr == "Show"){
            this.$message.success("启用成功")
          }else{
            this.$message.success( '展示已下架');
          }
          this.isRefresh = true;
         this.showDialog_ = false;
        },data=>{
          if(typeStr == "Show"){
           this.doctorShow = false;
          }else {
            this.doctorShow = true;
          }
        });
      },
    },
    mounted: function() {
    },
    watch: {
      showDialog: function(value) {
        this.showDialog_=value;
      },
    },
    data () {
      return {
        showDialog_: this.showDialog,
        dialogVisible_addDoctor: false,
        doctorDetail:{
          goodField:'',
          content:'',
          avatar:''
        },
        tags:[],
        doctorShow:false,
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import '../../assets/style/main.less';
  .MkDoctorDetail{
    .operate{
      position: absolute;
      top: 30px;
      right: 60px;
    }
    .el-tag {
      margin-right: 10px;
      margin-bottom:10px;
      background:rgba(59,192,195,0.2);
      border:1px solid rgba(59,192,195,0.1);
    }
    .contentDiv{
      hr{
        height: 1px;
        background: #f0f3f6;
        margin: 20px 0;
        border: none;
      }
      .head{
        line-height: 30px;
        margin-bottom: 20px;
        font-size: 16px;
      }
      .item{
        margin-bottom: 10px;
        color: #506470;
        .title{
          display: inline-block;
          width: 86px;
          text-align: right;
          margin-right: 30px;
        }
        .customer{
          display: inline-block;
          width: 23%;
        }
        .phone{
          display: inline-block;
          width: 23%;
        }
        .more{
          display: inline-block;
          float: right;
          cursor: pointer;
        }
      }
      .el-form-item{
        margin-bottom:10px;
      }
      .el-form-item__content{
        word-wrap:break-word
      }
    }
  }
</style>
